<template>
    <div>
        <ElTable border :data="data" row-key="id" v-bind="$attrs">
            <ElTableColumn :type="item.type" :align="item.align || 'center'" v-for="(item, key) in cols" :key="key"
                :label="item.title" :width="item.width" :prop="key">
                <template #header="{ column, $index }" v-if="$slots[key + 'header']">
                    <slot :name="key + 'header'" :column="column" :$index="$index"> </slot>
                </template>
                <template #default="{ row, column, $index }" v-if="$slots[key]">
                    <slot :name="key" :row="row" :column="column" :$index="$index">
                    </slot>
                </template>
            </ElTableColumn>
        </ElTable>
        <p></p>
        <ElPagination v-if="page" layout="total, sizes, prev, pager, next, jumper" v-model:page-size="page.pageSize"
            :total="total" v-model:current-page="page.pageNo" :page-sizes="[10, 20, 30, 40, 50, 70, 80, 100]"
            @size-change="sizeChange" @current-change="currentChange" />
    </div>
</template>

<script lang="ts">
export default {
    name: 'Table'
}
</script>

<script lang="ts" setup>

/**
 * 事件派发
 */
const emit = defineEmits(['update:page', 'change']);

const props = defineProps({
    /**
     * 数据
     */
    data: {
        type: Array,
        required: true
    },
    /**
     * 分页对象
     */
    page: Object,
    /**
     * 总条数
     */
    total: Number,
    /**
     * 列
     */
    cols: {
        type: Object,
        required: true
    }
});

/**
 * size更改
 * @param size 
 */
const sizeChange = (size: number) => {
    const obj = { ...props.page, pageSize: size };
    emit('update:page', obj);
    emit('change', obj);
}

/**
 * 页码变更
 * @param no 
 */
const currentChange = (no: number) => {
    const obj = { ...props.page, pageNo: no };
    emit('update:page', obj);
    emit('change', obj);
}
</script>

<style></style>